<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card style="margin-top: 20px">
      <el-alert
        show-icon
        title="注意: 只允许为第三级分类设置相关参数"
        type="warning"
      >
      </el-alert>
      <!-- 级联 -->
      <el-form style="margin-top: 15px">
        <el-form-item label="选择商品分类 :">
          <el-cascader
            v-model="value"
            :options="options"
            :props="props"
            expandTrigger="hover"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <!-- 导航 -->
      <el-tabs
        style="margin-top: -20px"
        v-model="activeName"
        @tab-click="handleSelect"
      >
        <!-- 表格(动态参数) -->
        <el-tab-pane name="1" label="动态参数">
          <el-button
            type="primary"
            :disabled="flag"
            style="margin-top: 10px; height: 30px; padding-bottom: 25px"
            @click="detailsUser = true"
            >添加动态参数</el-button
          >
          <el-table
            stripe
            :data="dynamic"
            border
            style="width: 100%; margin-top: 10px; line-height: 15px"
          >
            <el-table-column prop="attr_name" label="参数名称" width="808px">
            </el-table-column>
            <el-table-column label="操作" width="808px">
              <template #default="{ row }">
                <el-button type="primary" icon="el-icon-edit" @click="edit(row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="delt(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 静态属性 -->
        <el-tab-pane name="2" label="静态属性">
          <el-button
            type="primary"
            :disabled="flag"
            style="margin-top: 10px; height: 30px; padding-bottom: 25px"
            @click="detailsUser = true"
            >添加静态属性</el-button
          >
          <el-table
            stripe
            :data="dynamic"
            border
            style="width: 100%; margin-top: 10px; line-height: 15px"
          >
            <el-table-column prop="attr_vals" label="参数名称" width="808px">
            </el-table-column>
            <el-table-column label="操作" width="808px">
              <el-button type="primary" icon="el-icon-edit">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 添加弹框 -->
        <el-dialog title="添加动态参数" :visible.sync="detailsUser">
          <el-form ref="resRef" :rules="rules" :model="form">
            <el-form-item prop="attr_name" label="动态参数" label-width="120px">
              <el-input v-model="form.attr_name"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button>取 消</el-button>
            <el-button type="primary" @click="onYey">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog title="修改动态参数" :visible.sync="xiugaiUser">
          <el-form>
            <el-form-item label="动态参数" label-width="120px">
              <el-input v-model="huiXian.attr_name"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button>取 消</el-button>
            <el-button type="primary" @click="myEdit">确 定</el-button>
          </div>
        </el-dialog>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  getCategories,
  classification,
  addCategories,
  xiugaiUser,
  Echo,
  deleteList
} from '@/api/good'
export default {
  name: 'paramsIndex',
  data () {
    return {
      huiXian: [], // 回显
      detailsUser: false, // 弹框的显示隐藏
      xiugaiUser: false, // 编辑弹框的显示隐藏
      // 禁用按钮
      flag: true,
      activeName: '1', // 标签默认选中
      value: [], // 级联选中的值
      options: [], // 渲染级联的数据
      props: {
        checkStrictly: true, // 圆点
        label: 'cat_name', // 需要显示的名字
        value: 'cat_id', // id
        children: 'children' // 子级分类
      },
      dynamic: [], // 参数渲染
      // 动态输入框的值
      form: {
        attr_id: '',
        attr_name: '',
        attr_sel: ''
      },
      // 表单校验
      rules: {
        attr_name: [
          {
            required: true,
            message: '请输入动态参数'
          }
        ]
      }
    }
  },

  created () {
    this.getIfication()
  },
  computed: {},

  methods: {
    // 获取商品数据渲染级联
    async getIfication () {
      const res = await classification()
      // console.log(res.data)
      this.options = res.data
    },
    // 级联分类参数属性
    async handleChange (value) {
      console.log(value) // 级联选中的数据
      this.getHandleChange()
    },
    async getHandleChange () {
      if (this.value.length === 3) {
        // 打开禁用按钮
        this.flag = false
        const res = await getCategories(this.value[2])
        console.log(res.data)
        this.dynamic = res.data
      } else {
        return null
      }
    },
    // 切换获取参数的接口
    async handleSelect (key, keyPath) {
      // console.log(typeof key)
      // console.log(keyPath)
      // if (key === '2') {
      // 打开禁用按钮
      this.flag = false
      const res = await getCategories(this.value[2])
      console.log(res.data)
      this.dynamic = res.data
      // } else if (key === '1') {
      //   console.log('静态')
      // }
    },
    // 添加确认
    async onYey () {
      console.log(this.value)
      const res = await addCategories(this.value[2], {
        attr_id: this.form.attr_id,
        attr_name: this.form.attr_name,
        attr_sel: 'many'
      })
      console.log(res)
      this.$message.success(res.meta.msg)
      // 重新渲染列表
      this.handleChange()
      // 关闭弹框
      this.detailsUser = false
      // // 清空表单
      this.$refs.resRef.resetFields()
      // this.form.attr_name = ''
    },
    // 编辑回显
    async edit (row) {
      const res = await Echo(row.attr_id, {
        attr_id: row.attr_id,
        attr_name: row.attr_name,
        attr_sel: 'many'
      })
      console.log(res)
      // 显示弹框
      this.xiugaiUser = true
      this.huiXian = res.data
      // this.huiXian.attr_name = ''
    },
    // 点击修改
    async myEdit () {
      console.log(this.form)
      const res = await xiugaiUser(this.huiXian.attr_id, {
        attr_id: this.huiXian.attr_id,
        attr_name: this.huiXian.attr_name,
        attr_sel: 'many'
      })
      console.log(res)
      this.$message.success('修改成功')
      // 关闭弹框
      this.xiugaiUser = false
      // 重新渲染列表
      this.handleChange()
    },
    // 删除
    async delt (row) {
      await deleteList(row.attr_id)
      this.$message.success('删除成功')
      this.handleChange()
    }
    // 静态属性----------------
  }
}
</script>

<style scoped lang='scss'>
</style>
